<template>
  <div class='top'>
    <!-- 1.第一部分tab -->
    <div id="app">
      <img src="@/assets/images/index_03.png" alt="" class="imgs">
      <ul class="ul1">
        <li :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
        <li><img src="@/assets/images/index_06.png" alt=""></li>
      </ul>
    </div>
    <!-- 2.第二部分轮播图 -->
    <swiper :options="swiperOption" ref="mySwiper">
       <swiper-slide><img src="@/assets/images/index_06.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="@/assets/images/index_06.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="@/assets/images/index_06.jpg" alt=""></swiper-slide>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
     </swiper>
    <!-- 3.关于灵创 -->
    <div class="con3">
      <ul class="ul2">
        <li class="tu"><img src="@/assets/images/index_11.png" alt=""></li>
        <li class="hong"></li>
        <li :class='sanIndex==index?"active":""' :key='item.id' v-for='(item,index) in lists'>{{item.title}}</li>
        <li class="jd">通过简单、彻底而富于创意的系统策划和视觉整合，推动品牌快速成长。</li>
        <li class="tu2"><img src="@/assets/images/index_09.png" alt=""></li>
        <li class="anli"><a href="">更多案例</a></li>
      </ul>
    </div>
 <!-- 4.宫格组件 -->
   <div class="goge">
      <ul class="ul3">
        <li class="ul3tu"><img src="@/assets/images/index_13.png" alt=""></li>
        <li class="hong2"><span></span></li>
        <li class="an"><a href="">更多案例</a></li>
        <li v-for='(slist,index) in navlist' :key='index'>
          <vue-hover-mask @click="handleClick">
            <!-- 默认插槽 -->
            <img :src="slist.imgSrc" />
            <!-- action插槽 -->
            <template v-slot:action>
              <div class="zhao">
                <i class="iconfont zoom">VI</i>
                <i class="iconfont delete">DESIGN</i>
                <i class="baiga"></i>
                <i class="zhu">三潮煮艺</i>
                <i class="zhu">地道乡情，原生潮味</i>
                <img class="jianto" src="@/assets/images/hidePointer.png" alt="">
              </div>
            </template>
          </vue-hover-mask>
        </li>
        <li class="an3"><a href="">更多案例</a></li>
      </ul>
    </div>

    <!-- 5.灵创服务 -->
    <div class="chuang">
      <ul class="ul5">
        <li><img src="@/assets/images/index_13.png" alt=""></li>
        <li class="ul5hong"><span></span></li>
        <li>灵创服务</li>
      </ul>
      <!-- 引用组件 -->
      <ul>
        <li v-for='(slist,index) in nslist' :key='index' class="zonn">
          <!-- click事件 -->
          <vue-hover-mask @click="handleClick">
            <!-- 默认插槽 -->
            <img src="@/assets/images/1.jpg" style="width: 357px;height: 183px;object-fit: cover;" />
            <!-- action插槽 -->
            <template v-slot:action>
              <div class="san">
                <i class="iconfont zoom"></i>
                <i class="iconfont delete"></i>
              </div>
            </template>
          </vue-hover-mask>
        </li>
      </ul>


      <div class="liebiao">
        <span :class='urrentIndex==index?"active":""' :key='item.id' v-for='(item,index) in listes'>{{item.title}}</span>
      </div>

      <div class="liebiao">
        <span :class='eurrentIndex==index?"active":""' :key='item.id' v-for='(item,index) in elistes'>{{item.title}}</span>
      </div>

      <div class="liebiao">
        <span :class='surrentIndex==index?"active":""' :key='item.id' v-for='(item,index) in slistes'>{{item.title}}</span>
      </div>

    </div>

    <!-- 6.背景大图片 -->
   <div class="bei">
      <img src="@/assets/images/aboutimg_17.png" alt="">
      <div class="bei-right">
        <div class="bei-top">
          <div class="bei-kuang">
            <h1 style="color: white;margin-left: 30px;">June</h1><br>
            <h1 style="color: white;margin-left: 30px;">08</h1>
          </div>
          <div class="bei-kuang-r">
            <p><a href="">上品2015年会-风雨前行，有约未来</a></p>
            <div class="bei-ji">
              <img src="@/assets/images/index_jia_07.png" alt="">
              <a href="">MORE</a>
            </div>
          </div>

          <div class="bei-top">
            <div class="bei-kuang">
              <h1 style="color: white;margin-left: 30px;">June</h1><br>
              <h1 style="color: white;margin-left: 30px;">08</h1>
            </div>
            <div class="bei-kuang-r">
              <p><a href="">上品2015年会-风雨前行，有约未来</a></p>
              <div class="bei-ji">
                <img src="@/assets/images/index_jia_07.png" alt="">
                <a href="">MORE</a>
              </div>
            </div>

          </div>
          <div class="bei-geng"><a href="">了解更多</a></div>
        </div>
      </div>
    </div>
    <!-- 7.合作伙伴 -->
    <div class="he">
      <ul class="he-ul">
        <li><img src="@/assets/images/index_11.png" alt=""></li>
        <li><span></span></li>
        <li>合作伙伴</li>

      </ul>

      <div class="he-img" v-for='(slist,index) in nslistx' :key='index'>
        <!-- click事件 -->
        <vue-hover-mask @click="handleClick">
          <!-- 默认插槽 -->
          <img :src="slist.imgSrc" style="width: 250px;height: 200px;object-fit: cover;" />
          <!-- action插槽 -->
          <template v-slot:action>
            <div class="he-tu"></div>
          </template>
        </vue-hover-mask>
      </div>
      <div class="he-geng"><a href="">了解更多</a></div>
    </div>

    <!-- 8.联系我们 -->

    <div class="lian">
      <ul class="lian-ul">
        <li><img src="@/assets/images/index_15.png" alt=""></li>
        <li><span></span></li>
        <li>联系我们</li>
      </ul>
      <div class="lian-con">
        <div class="lian-left">
          <ul class="left-ul">
            <li><a href="">关于</a></li>
            <li><span></span></li>
            <li><a href="">公司优势</a></li>
          </ul>
          <ul class="left-ul">
            <li><a href="">案例</a></li>
            <li><span></span></li>
            <li><a href="">全部作品</a></li>
            <li><a href="">产品包装</a></li>
            <li><a href="">品牌设计</a></li>
            <li><a href="">活动策划</a></li>
            <li><a href="">酒店视觉</a></li>
          </ul>
          <ul class="left-ul">
            <li><a href="">动态</a></li>
            <li><span></span></li>
            <li><a href="">行业新闻</a></li>
            <li><a href="">企业动态</a></li>
          </ul>
          <ul class="left-ul">
            <li><a href="">服务</a></li>
            <li><span></span></li>
            <li><a href="">精英团队</a></li>
          </ul>
          <ul class="left-ul">
            <li><a href="">联系</a></li>
            <li><span></span></li>
            <li><a href="">加入我们</a></li>
            <li><a href="">联系方式</a></li>
          </ul>
        </div>
        <div class="lian-right">
          <ul class="lianul">
            <li class="lianli" :class='entIndex==index?"active":""' :key='item.id' v-for='(item,index) in litst'>{{item.title}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="hei"></div>
    <!-- 9. -->
    <div class="di">
      <ul class="diul">
        <li class="dili" :class='tIndex==index?"active":""' :key='item.id' v-for='(item,index) in loist'>{{item.title}}</li>
      </ul>
      <ul class="diul2">
        <li v-for='(slist,index) in toslist' :key='index'>
          <!-- click事件 -->
          <vue-hover-mask @click="handleClick">
            <!-- 默认插槽 -->
            <img :src="slist.imgSrc" />
            <!-- action插槽 -->
            <template v-slot:action>
              <div class="diimgs"></div>
            </template>
          </vue-hover-mask>
        </li>
      </ul>
    </div>
</div>
</template>

<script>
  export default {

    name: 'Test',
    data() {
      return {
        // 1.导航条
        currentIndex: 0,
        list: [
          { id: 1,title: '首页', },
          { id: 2,title: '关于', },
          { id: 3,title: '案例', },
          { id: 4,title: '动态', },
          { id: 5,title: '服务', },
          { id: 6,title: '联系', },
        ],

        // 2.轮播图
        swiperOption: {
          notNextTick: true, // 必须为true,保证的vue-awsome-swiper先加载
          loop: true, //循环
          slidesPerView: 1, //每页 的页数
          speed: 9000, //轮播速度
          autoplay: true, //自动轮播
          grabCursor: true, //鼠标悬浮小手形状
        },

        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },


        // 3.

        sanIndex: 0,
        lists: [{
            id: 1,
            title: '关于灵创',
          },
          {
            id: 2,
            title: '当你说了想法，他还在木讷的时候！　当你想展现主题，他却在画背景的时候！',
          },
          {
            id: 3,
            title: '当你要创新，他给你一团麻的时候！　当你要砸键盘的时候！',
          },
          {
            id: 4,
            title: '眼睛起红线的时候!　也许换一家更懂你的设计公司很重要！',
          },
          {
            id: 5,
            title: '灵创品牌设计　一家懂你的设计公司。  灵创设计，让您的想法在画面上跳跃！',
          },
          {
            id: 6,
            title: '通过简单、彻底而富于创意的系统策划和视觉整合，推动品牌快速成长。',
          },
        ],
        // 4.

        navlist: [{
            imgSrc: require('@/assets/images/index_eg1.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg2.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg3.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg4.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg5.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg6.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg7.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg8.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg9.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg10.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg11.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg12.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg13.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg14.jpg'),
          },
          {
            imgSrc: require('@/assets/images/index_eg15.jpg'),
          },
        ],

        // 5.   组件'vue-hover-mask'
        nslist: [{
            imgSrc: require('@/assets/images/1.jpg'),
          },
          {
            imgSrc: require('@/assets/images/1.jpg'),
          },
          {
            imgSrc: require('@/assets/images/1.jpg'),
          },
        ],



        // 6.
        urrentIndex: 0,
        listes: [{
            id: 1,
            title: '使用规范',
          },
          {
            id: 2,
            title: '品牌表现',
          },
          {
            id: 3,
            title: '主题规划',
          },
          {
            id: 4,
            title: '品牌企划',
          },
          {
            id: 5,
            title: '命名系统',
          },
          {
            id: 6,
            title: '品牌核心',
          },
          {
            id: 7,
            title: '品牌语言',
          },
        ],

        eurrentIndex: 0,
        elistes: [{
            id: 1,
            title: '品牌识别',
          },
          {
            id: 2,
            title: '产品开发',
          },
          {
            id: 3,
            title: '产品设计',
          },
          {
            id: 4,
            title: '采购点',
          },
          {
            id: 5,
            title: '终端设计',
          },
          {
            id: 6,
            title: '标牌',
          },
          {
            id: 7,
            title: '包装设计',
          },
        ],

        surrentIndex: 0,
        slistes: [{
            id: 1,
            title: '平面广告',
          },
          {
            id: 2,
            title: '短片及摄影',
          },
          {
            id: 3,
            title: '市场行销',
          },
          {
            id: 4,
            title: '品牌经验',
          },
          {
            id: 5,
            title: '网站及互联网',
          },
          {
            id: 6,
            title: '产品包装',
          },
          {
            id: 7,
            title: '艺术指导',
          },
        ],
        // 7.

        nslistx: [{
            imgSrc: require('@/assets/images/pinpai1.jpg'),
          },
          {
            imgSrc: require('@/assets/images/pinpai2.jpg'),
          },
          {
            imgSrc: require('@/assets/images/pinpai3.jpg'),
          },
          {
            imgSrc: require('@/assets/images/pinpai4.jpg'),
          },
          {
            imgSrc: require('@/assets/images/pinpai5.jpg'),
          },
          {
            imgSrc: require('@/assets/images/pinpai6.jpg'),
          },
          {
            imgSrc: require('@/assets/images/pinpai7.jpg'),
          },
          {
            imgSrc: require('@/assets/images/pinpai8.jpg'),
          },
          {
            imgSrc: require('@/assets/images/pinpai9.jpg'),
          },
          {
            imgSrc: require('@/assets/images/pinpai10.jpg'),
          },

        ],

        // 8
        entIndex: 0,
        litst: [{
            id: 1,
            title: '石家庄灵创设计有限公司',
          },
          {
            id: 2,
            title: '灵创品牌设计是一家的以品牌为导向的设计公司。',
          },
          {
            id: 3,
            title: '灵创品牌设计是一家创新发展型专业设计公司。',
          },
          {
            id: 4,
            title: '公司坚持从品牌战略、视觉战略做设计，累积了多年的成功经验，为产品创新提供借鉴性的理论和经验.通过简单、彻底而富于创意的系统策划和视觉整合，推动品牌快速成长。',
          },

        ],
        // 9.
        tIndex: 0,
        loist: [{
            id: 1,
            title: 'COPYRIGHT (©) 2016 灵创设计　京ICP备1201****号-5　　地点：河北省石家庄市桥西区海悦国际D座1202',
          },
          {
            id: 2,
            title: '邮编：101100　　邮箱：4522622535***@qq.com',
          },
          {
            id: 3,
            title: '电话：010-6955***　　手机：1381133**** / 18611811***',
          },
          {
            id: 4,
            title: '技术支持：金色方向（网站建设）'
          },
        ],


        toslist: [{
            imgSrc: require('@/assets/images/top1.jpg'),
          },
          {
            imgSrc: require('@/assets/images/top2.jpg'),
          },
          {
            imgSrc: require('@/assets/images/top3.jpg'),
          },
          {
            imgSrc: require('@/assets/images/top4.jpg'),
          },

        ],


      }
    },

    methods: {
      handleClick() {
        console.log('click')
      },
    }
  }
</script>

<style scoped>
  /* 1. 导航条*/
  #app {
    width: 100%;
    height: 50px;
    position: relative;
  }

  #app .imgs {
    display: block;
    width: 350px;
    height: 50px;
  }

  #app .ul1 {
    width: 800px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
  }

  #app .ul1 li {
    width: 100px;
    height: 40px;
    float: left;
    list-style: none;
    margin: 10px 5px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    cursor: pointer;
  }

  /* 3.关于灵创 */
  .con3 {
    width: 100%;
    height: 541px;
    /* border: 1px solid #0000FF; */
    margin-top: 20px;
  }

  .con3 .ul2 li {
    width: 800px;
    height: 40px;
    /* border: 1px solid #000000; */
    margin: 0 auto;
    list-style: none;
    text-align: center;
    line-height: 40px;
    color: dimgrey;
    font-size: 15px;
  }

  .con3 .ul2 .tu {
    width: 800px;
    height: 80px;
  }

  .con3 .ul2 li img {
    margin: 20px;
  }

  .con3 .ul2 .hong {
    width: 100px;
    height: 5px;
    background-color: red;
  }

  .con3 .ul2 .jd {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
  }

  .con3 .ul2 .tu2 {
    width: 800px;
    height: 100px;
  }

  .con3 .ul2 .anli {
    width: 100px;
    height: 30px;
    border: 3px solid red;
    margin: 25px auto;
  }

  .con3 .ul2 .anli a {
    display: block;
    margin: -5px auto;
    text-decoration: none;
    color: red;
  }

  /* 4.遮罩层 */
  .goge {
    width: 100%;
    height: 1048px;
    background-color: #ccc;
    margin-top: 20px;
  }

  .goge .ul3 {
    height: 600px;
    /* border: 1px solid red; */
  }

  .goge .ul3 li {
    width: 303px;
    height: 269px;
    /* border: 1px solid aqua; */
    float: left;
    list-style: none;
  }

  .goge .ul3 .ul3tu {
    width: 100%;
    height: 50px;
    /* border: 1px solid #000000; */
    margin: 15px auto;
  }

  .goge .ul3 .ul3tu img {
    display: block;
    width: 500px;
    height: 50px;
    /* border: 1px solid #000000; */
    margin: 0 auto;
  }

  .goge .ul3 .hong2 {
    width: 100%;
    height: 5px;
    /* border: 1px solid red; */
  }

  .goge .ul3 .hong2 span {
    display: block;
    width: 100px;
    height: 5px;
    background-color: red;
    margin: 0 auto;
  }

  .goge .ul3 .an {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .goge .ul3 .an a {
    display: block;
    width: 100px;
    height: 30px;
    margin: 10px auto;
    color: #000000;
    text-decoration: none;
  }

  .goge .ul3 img {
    width: 306px;
    height: 269px;
    /* border: 1px solid red; */
  }

  .goge .ul3 .an3 {
    width: 100%;
    height: 106px;
  }

  .goge .ul3 .an3 a {
    display: block;
    width: 120px;
    height: 40px;
    margin: 30px auto;
    text-align: center;
    line-height: 40px;
    color: black;
    text-decoration: none;
  }

  @import url('//at.alicdn.com/t/font_1223885_a68qqkvtjgr.css');

  .zhao {
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: 0.8;
  }

  .zhao i {
    display: block;
    width: 100px;
    height: 30px;
    /* border: 1px solid #0000FF; */
  }

  .zhao .zoom {
    width: 50px;
  }

  .zhao .baiga {
    width: 30px;
    height: 4px;
    background-color: white;
    margin-left: 12px;
  }

  .zhao .zhu {
    width: 200px;
    height: 40px;
    /* border: 1px solid palegoldenrod; */
    margin: 10px 3px 4px 98px;
    text-align: center;
    line-height: 40px;
  }

  .goge .ul3 .zhao .jianto {
    display: block;
    width: 60px;
    height: 60px;
    float: right;
  }

  /* 5.灵创服务 */
  .chuang {
    width: 100%;
    height: 495px;
  }

  .chuang .ul5 li {
    width: 100%;
    height: 46px;
    list-style: none;
    text-align: center;
    line-height: 46px;
    margin-top: 6px;
    /* border: 1px solid #000000; */
  }

  .chuang .ul5 .ul5hong {
    width: 100%;
    height: 20px;
    /* border: 1px solid #FF0000; */
  }

  .chuang .ul5 .ul5hong span {
    display: inline-block;
    width: 80px;
    height: 8px;
    background-color: red;
    margin: 11px auto;
  }

  /* 组件 */
  @import url('//at.alicdn.com/t/font_1223885_a68qqkvtjgr.css');

  .iconfont {
    padding: 0 10px;
    font-size: 24px;
  }

  .san {
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: 0.5;
  }

  .chuang .zonn {
    float: left;
    margin: 10px 74px;
    list-style: none;
  }

  .liebiao {
    width: 200px;
    height: 100px;
    /* border: 1px solid red; */
    margin: 40px 142px;
    float: left;
  }

  .liebiao span {
    display: block;
    width: 100px;
    float: left;
  }

  /* 6 */
  .bei {
    width: 100%;
    height: 500px;
    /* background-color: #42B983; */
    background-image: url(../assets/images/index_tou_08.jpg);
  }

  .bei img {
    display: block;
    margin-left: 40px;
    float: left;
    margin-top: 5px;
  }

  .bei .bei-right {
    width: 790px;
    height: 400px;
    /* border: 1px solid #0000FF; */
    float: right;
    margin-top: 50px;
  }

  .bei .bei-top {
    width: 700px;
    height: 400px;
    /* background-color: #87CEEB; */
  }

  .bei .bei-kuang {
    width: 200px;
    height: 150px;
    border: 4px solid red;
    float: left;
    margin-top: 20px;
  }

  .bei .bei-kuang span {
    font-size: 18px;
    font-weight: bold;
    color: white;
  }

  .bei .bei-kuang-r {
    width: 478px;
    height: 200px;
    /* background-color: yellow; */
    float: right;
  }

  .bei .bei-kuang-r a {
    color: red;
    text-decoration: none;
  }

  .bei .bei-kuang-r .bei-ji {
    width: 100px;
    height: 30px;
    /* border: 1px solid aqua; */
    margin-top: 100px;
  }

  .bei .bei-geng {
    width: 100px;
    height: 30px;
    background-color: red;
    float: right;
  }

  .bei .bei-geng a {
    color: white;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
  }

  /* 7. */
  .he {
    width: 100%;
    height: 695px;
    background-color: #ccc;
    padding: 20px;
  }

  .he .he-ul li {
    width: 700px;
    height: 40px;
    /* border: 1px solid red; */
    list-style: none;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
  }

  .he .he-ul li span {
    display: block;
    width: 100px;
    height: 6px;
    background-color: red;
    margin: 10px auto;
  }

  @import url('//at.alicdn.com/t/font_1223885_a68qqkvtjgr.css');

  .iconfont {
    padding: 0 10px;
    font-size: 24px;
  }

  .he-img {
    width: 237px;
    margin: 30px 20px 0px 31px;
    float: left;
  }

  .he-tu {
    width: 100%;
    height: 100%;
    background-color: crimson;
    opacity: 0.3;
  }

  .he .he-geng {
    width: 70px;
    height: 30px;
    border: 1px solid #000000;
    margin-top: 539px;
    margin-left: 47%;
  }

  .he .he-geng a {
    color: black;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
  }

  /* 8. */
  .lian {
    width: 100%;
    height: 500px;
    /* background-color: pink; */
    padding: 20px;
  }

  .lian .lian-ul li {
    width: 100%;
    height: 40px;
    list-style: none;
    float: left;
    text-align: center;
    line-height: 40px;

  }

  .lian .lian-ul img {
    display: block;
    width: 300px;
    height: 40px;
    margin: 0 auto;

  }

  .lian .lian-ul li span {
    display: block;
    width: 80px;
    height: 7px;
    margin: 10px auto;
    background-color: red;
  }

  .lian .lian-con {
    width: 100%;
    height: 400px;
    /* background-color: #42B983; */
    margin-top: 120px;
  }

  .lian .lian-con .lian-left {
    width: 800px;
    height: 400px;
    /* background-color: #87CEEB; */
    float: left;
  }

  .lian .left-ul {
    width: 100px;
    height: 258px;
    /* border: 1px solid #0000FF; */
    margin-top: 140px;
    margin-left: 40px;
    float: left;
  }

  .lian .left-ul li {
    width: 100%;
    height: 30px;
    list-style: none;
    text-align: center;
    line-height: 30px;
  }

  .lian .left-ul li a {
    color: black;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
  }

  .lian .left-ul li span {
    display: block;
    width: 50px;
    height: 6px;
    background-color: red;
    margin: 7px auto;
  }

  .lian .lian-con .lian-right {
    width: 707px;
    height: 400px;
    /* background-color: plum; */
    float: left;
  }

  .lian .lianul {
    margin-top: 87px;
  }

  .lian .lianli {
    width: 500px;
    height: 66px;
    /* border: 1px solid #42B983; */
    /* background-color: #FF0000; */
    margin: 1px auto;
    list-style: none;
  }

  .lian .lianul li:nth-child(2) {
    color: red;
  }

  .lian .lianul li:nth-child(3) {
    color: red;
  }

  .hei {
    width: 100%;
    height: 50px;
    background-color: black;
  }

  /* 9 */
  .di {
    width: 100%;
    height: 200px;
    background-color: black;
  }

  .di .dili {
    width: 795px;
    height: 30px;
    /* border: 1px solid #0000FF; */
    color: white;
    margin-left: 20px;
    list-style: none;
  }

  .di .diul2 {
    width: 500px;
    height: 63px;
    /* border: 1px solid #42B983; */
    float: right;
    margin-top: -68px;
  }

  .di .diul2 li {

    float: left;
    list-style: none;
    background-color: #000000;
    border-radius: 50%;
    margin-left: 7px;
  }

  .di .diul2 li img {
    display: block;
    width: 60px;
    border-radius: 50%;
    /* margin-left: 15px; */
  }

  .di .diul2 .diimgs {
    width: 60px;
    height: 60px;
    background-color: red;
    opacity: 0.5;
    border-radius: 50%;
    /* margin-left: 15px; */
  }
</style>
